<script setup lang="ts">
defineOptions({
  name: "gasCylinderStatusStat"
});

import { ref, onMounted } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import { queryPlatformOverview, queryGasCylinderStatusStat } from "@/api/modules/operation";
import { useLabelLayoutRingGraphFn, useGetRingGraphAgOptions } from "@/hooks/useEcharts";

const platformOverviewQueryData = ref<any>(null);

// 气瓶状态统计
const gasCylinderStatusStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const gasCylinderStatusStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const gasCylinderStatusStatTitle = ref<string>("气瓶状态统计");
const gasCylinderStatusStatInit = async () => {
  if (!platformOverviewQueryData.value?.length) return gasCylinderStatusStatRef.value.loadingInstance.close();
  const ec = await gasCylinderStatusStatRef.value.getEcharts();
  const data = platformOverviewQueryData.value
    ?.filter(item => item.name !== "总计")
    ?.map(item => {
      const { name, num: value } = item;
      return { name, value };
    });
  const ag = useGetRingGraphAgOptions(platformOverviewQueryData.value?.find(item => item.name === "总计")?.num);
  const colorList = ["#3B82F6", "#FABF2B", "#35CECB", "#FF5639", "#FF0066"];
  gasCylinderStatusStatOptions.value = useLabelLayoutRingGraphFn(ec, data, gasCylinderStatusStatTitle.value, "", colorList, ag);
  gasCylinderStatusStatRef.value.loadingInstance.close();
};

// 获取数据  气瓶状态统计 + 气瓶更换今日任务 + 酸桶状态统计 + 酸桶更换今日任务 + 侦测器状态统计 + 侦测器隔离今日任务 + 纯水品质 + 大宗气体流量统计 + 槽车填充今日任务 + 质量指标
const queryPlatformOverviewFn = async () => {
  const res = await queryGasCylinderStatusStat(null, () => {
    gasCylinderStatusStatRef.value.loadingInstance.close();
  });
  if (!res) return;
  platformOverviewQueryData.value = res;
};

const initLoading = () => {
  gasCylinderStatusStatRef.value.initLoading();
};

onMounted(async () => {
  initLoading();
  // 获取数据  气瓶状态统计 + 气瓶更换今日任务 + 酸桶状态统计 + 酸桶更换今日任务 + 侦测器状态统计 + 侦测器隔离今日任务 + 纯水品质 + 大宗气体流量统计 + 槽车填充今日任务 + 质量指标
  queryPlatformOverviewFn().then(() => {
    gasCylinderStatusStatInit();
  });
});
</script>

<template>
  <div class="gas-overview-item">
    <echartsChart ref="gasCylinderStatusStatRef" :title="gasCylinderStatusStatTitle" :options="gasCylinderStatusStatOptions" />
  </div>
</template>

<style lang="scss" scoped>
.gas-overview-item {
  width: 100%;
  height: 100%;
}
</style>
